<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="static/styles/reset.css" />
		<link rel="stylesheet" type="text/css" href="static/styles/common.css"/>
		<link rel="stylesheet" type="text/css" href="static/styles/message.css"/>
		<script src="static/scripts/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/scripts/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/scripts/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<title>发布</title>
	</head>
	<body>
		<div class="body body_gray" id="app">
			<div id="header" class="fixed blue">
				<a href="javascript:history.go(-1);" class="header_back">
	        		<img src="static/images/nav_back.png"/>
	        	</a>
				<h1 class="title">发布</h1>
				<a class="header_btn_right"></a>
			</div>
			<div class="page_body">
				<form class="message_form">
					<div class="item md_cell">
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span>发布机构</span>
							</div>
							<div class="md_cell-value weui-cell__bd">
								<select class="select" v-model="form.fbjg" >
									<option value="">选择已有机构</option>
									<option :value="val.id" v-for="(val,i) in qxList">{{val.name}}</option>
								</select>
								<img class="arrow_right_icon" style="width: 10px;" src="static/images/home_button_rightarrow.png"/>
							</div>
						</div>
						<div class="md_cell-wrapper" style="border-bottom: 0;">
							<div class="md_cell-title">
								<span>接收机构</span>
							</div>
							<div class="md_cell-value weui-cell__bd">
								<select class="select" v-model="form.jsjg" >
									<option value="">选择已有机构</option>
									<option :value="val.id" v-for="(val,i) in qxList">{{val.name}}</option>
								</select>
								<img class="arrow_right_icon" style="width: 10px;" src="static/images/home_button_rightarrow.png"/>
							</div>
						</div>
					</div>
					<div class="item md_cell">
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span>报送主题</span>
							</div>
							<div class="md_cell-value">
								<input type="text" class="input" v-model="form.bszt" placeholder="请输入"/>
							</div>
						</div>
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span>报送内容</span>
							</div>
							<div class="md_cell-value">
								
							</div>
						</div>
						<div class="mt5 " style="padding-bottom: 5px;">
							<textarea class="md_textarea" v-model="form.bsnr" placeholder="请输入报送内容"></textarea>
						</div>
					</div>
					
					<div class="item md_cell">
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span>开始时间</span>
							</div>
							<div class="md_cell-value weui-cell__bd" style="direction: rtl;">
								<img class="arrow_right_icon" style="width: 10px;" src="static/images/home_button_rightarrow.png"/>
								<input type="date" v-model="form.startTime" style="opacity: 0;"/>
								<span class="fake_value"  v-if="form.startTime"  v-text="form.startTime"></span>
								<span v-else class="fake_text">请选择</span>
							</div>
						</div>
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span>备注</span>
							</div>
							<div class="md_cell-value">
								
							</div>
						</div>
						<div class="mt5 " style="padding-bottom: 5px;">
							<textarea class="md_textarea" v-model="form.bz" placeholder="请输入"></textarea>
						</div>
					</div>
					
					<div class="item md_cell">
						
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span>走访照片</span>
							</div>
							<div class="md_cell-value">
								
							</div>
						</div>
						<div class="mt5 " style="padding-bottom: 5px;">
							<div class="uploadImgList">
								<div class="imgitem" v-for="(item,index) in fileList" :key="index">
									<img class="previewImg" :src="item.file.src"/>
									<span class="delete_icon" @click="delUploadImg(index)">
										<img src="static/images/xixg_icon_shanchu.png"/>
									</span>
								</div>
								
								<div class="imgitem uploadFileItem">
									<input type="file"  accept="image/*" multiple @change="handleUploadImg($event)" class="uploadFile"/>
									<img src="static/images/add.png"/>
								</div>
							</div>
						</div>
					</div>
					
					
					
					
					<div class="submitBtn">
						<button type="button" class="btn btn-block btn-blue" @click="submitForm">保存</button>
					</div>
					
				</form>
				
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					form:{
						fbjg:'',
						jsjg:'',
						bszt:'',
						bsnr:'',
						startTime:'',
						bz:'',
					},
					qxList:[{name:'区县一',id:1},{name:'区县二',id:2}],
					tcList:[{name:'套餐一',id:1},{name:'套餐二',id:2}],

					fileList:[],	//文件列表对象
					rules:{
						fbjg:[{required:true,message: '请选择发布机构'}],
						jsjg:[{required:true,message: '请选择接收机构'}],
						bszt:[{required:true,message: '请输入报送主题'}],
						bsnr:[{required:true,message: '请输入报送内容'}],
						startTime:[{required:true,message: '请选择开始时间'}],
						bz:[{required:true,message: '请输入备注'}],
					}
				},
				methods:{
					//处理选择的文件
					handleUploadImg(event){
						var ctx = this;
						if (!event.target.files[0].size) return;
			            var files = event.target.files;
						console.log(files)
						for (let i = 0; i < files.length; i++) {
			                this.addFile(files[i])
			            }
						event.target.value = ''
					},
					//添加文件到filelist对象
					addFile(file){
						var ctx = this;
						let reader = new FileReader();
		                reader.readAsDataURL(file);
		                reader.onload = function () {
		                    file.src = this.result;
		                    ctx.fileList.push({file});
		                }
					},
					//删除图片
					delUploadImg(index){
						this.fileList.splice(index,1)
					},
					//验证表单
					validateForm(form,cb){
						var rules = this.rules;
						function checkEmpty(val){
							return val===undefined||val===''||val===null;
						}
						for(var key in rules){
							for (let i = 0; i < rules[key].length; i++){
								if(rules[key][i].required){
									console.log(form[key].length)
									if(checkEmpty(form[key])){
										let msg = rules[key][i].message?rules[key][i].message:'请检查输入';
										cb(false,msg)
										return ;
									}
								}
							}
						}
						cb(true,'pass')
					},
					//保存
					submitForm(){
						var ctx = this;
						this.validateForm(this.form,function(valid,msg){
							if(valid){	//验证通过
								var formData = new FormData();
								for (let i = 0; i < ctx.fileList.length; i++) {
					               formData.append("file",ctx.fileList[i].file);
					            }
								for(var key in ctx.form){
									formData.append(key,ctx.form[key]);
								}
								axios.post('/ss',formData).then(res=>{
								
								}).catch(err=>{
									console.log(err)
								})
								
							}else{	//验证不通过
								alert(msg)
							}
						})
					}
				}
			})
		</script>
	</body>
</html>
